﻿<div class="box" style="width:600px;">
    <div class="box-title text-left">图像作品</div>
    <div class="box-content">
        <form method="POST" id="formAddPicture">
            <div class="form-horizontal label-align-left">
                <div class="form-group">
                    <input type="hidden" name="pic" id="pid" value="{$id}" />
                    <label class="control-label col-xs-2 text-center">作品名称</label>
                    <div class="col-xs-10">
                        <input type="text" class="form-control" id="title" name="title" value="{$arr.title}" data-val="true" data-val-required="作品名称不能为空">
                        <span data-valmsg-for="title" data-valmsg-replace="true"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-2 text-center">简短介绍</label>
                    <div class="col-xs-10">
                        <textarea type="text" class="form-control" placeholder="60字以内简短介绍" id="description" name="description" rows="4" data-val="true" data-val-required="简短介绍不能为空">{$arr.description}</textarea>
                        <span data-valmsg-for="description" data-valmsg-replace="true"></span>
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-xs-2 text-center">图片文件</label>

                    <div class="col-xs-10">
                        <p><input type="file" name="file_upload" id="file_upload" /></p>
                        <input type="hidden" id="uploadurl" value="{$arr.pic_url}" />
                    </div>

                </div>
                <div class="form-group">
                    <label class="control-label col-xs-2 text-center">预览</label>
                    <div class="col-xs-10">
                        <div id="uploadPreview" class="upload-preview" style="background-image:url('__APP__/{$arr.pic_url}');background-repeat:  no-repeat;">
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>

            <div class="box-buttons">
                <p style="display:none;color:red; text-align:center; margin-right:10px;" id="notice"></p>
                <button type="submit" class="btn btn-success" id="btnSubmitPicture">提交作品</button>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript">
    require(["jquery", "modules/message"], function ($, messagebox) {
        $(function () {
            $("#file_upload").uploadify({
                auto: true,
                swf: '__Public__/js/uploadify/uploadify.swf',
                uploader: "{:U('Util/uploadwork')}",
                //buttonClass: 'btn btn-success',
                buttonText: '选择图片',
                fileSizeLimit: '2MB',
                fileTypeExts: '*.jpg;*.png;*.gif',
                multi: false,
                overrideEvents: ['onDialogClose', 'onUploadError', 'onSelectError'],
                onSelectError: function (file, errorCode, errorMsg) {
                    if (errorCode == -110) {
                        messagebox.alert({ content: '图片文件不能大于2M' });
                        return false;
                    }
                    console.log(errorCode);
                },
                onUploadSuccess: function (file, data, respone) {
                    console.log(data);
                    var jsonObject = JSON.parse(data);
                    if (jsonObject.success) {
                        $('#uploadurl').val(jsonObject.url);
                        $("#uploadPreview").css("background-image", "url(/" + jsonObject.url + ")");
                    } else {
                        messagebox.alert({ content: jsonObject.msg });
                    }
                }
            });
            $.validator.unobtrusive.parse($("#formAddPicture"));

            $("#btnSubmitPicture").click(function () {
                if (!$("#formAddPicture").valid()) {
                    return false;
                }
                savePictures($("#pid").val());
                return false;
            });
        });

        function showimg(name, url) {
            $('#uploadurl').val(url);
        }

        function savePictures(id) {
            var url = "{:U('User/add_works_ajax')}";
            var title = $('#title').val();
            var description = $('#description').val();
            var uploadurl = $('#uploadurl').val();

            $.post(url, { title: title, description: description, uploadurl: uploadurl, id: id, type: 1 }, function (data) {
                var vdata = eval(data);
                if (vdata.success == 1) {
                    messagebox.alert({
                        content: '保存成功', sure: function () {
                            location.reload();
                        }
                    });
                }
                else {
                    messagebox.alert({ content: data.msg });
                }
            }, 'json');
            return false;
        }
    });
</script>
